<template>
  <div style="letter-spacing: 1px" class="div">
    <div class="head">
      <!-- 评论框 @focus="obtain"
  @blur="lose" -->
      <input
          type="text"
          placeholder="请输入评论 . . ."
          ref="input"
          v-model="comment"
          @keyup.enter="submitComment"
          />
      <!-- 发布按钮 -->
      <button @click="submitComment">发表评论</button>
    </div>
    <div class="content">
      <!-- 一级评论 -->
      <div class="first" v-for="(item, index) in comments" :key="index">
        <a href="javascript:;" class="first-img">
          <!-- 如果当前用户有头像则显示头像,没有则显示默认头像 -->
          <img v-if="item.profilePhoto" :src="item.profilePhoto" alt=""/>
          <img v-else src="https://randomuser.me/api/portraits/men/1.jpg" alt=""/>
        </a>
        <div class="first-content">
          <!-- 一级评论用户昵称 -->
          <h3 class="first-username">{{ item.username }}</h3>
          <!-- 一级评论发布时间 -->
          <span class="first-time">{{ item.commentCreateTime | formatDate(item.commentCreateTime) }}</span>
          <!-- 一级评论评论内容 -->
          <p class="first-comment">
            {{ item.commentDetail }}
          </p>
          <!-- 一级评论评论点赞 -->
          <div class="first-right">
            <span class="comments" @click="comment_input(item)">
              <i class="el-icon-chat-dot-round">回复</i></span>
            <!-- 一级评论点赞数 -->
            <span @click="giveLike(item)">
              <svg :stroke="item.isLike === 1?'red':'currentColor'" fill="none" stroke-width="2"
                   viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"
                   class="h-4 w-4" height="1em" width="1em"
                   xmlns="http://www.w3.org/2000/svg"
                   :ref="'zan'+item.id">
                 <path
                     d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3">
                 </path></svg>&nbsp;
              <span v-if="item.likeNumber">{{ item.likeNumber ===0?'':item.likeNumber }}</span>
            </span>
          </div>
          <!-- 回复一级评论 -->
          <div class="reply-comment" v-if="item.display">
            <input
                type="text"
                placeholder="请输入评论 . . ."
                v-model="childComments"
                @keyup.enter="reply_submit(item, 0)"
                ref="childComments"/>
            <!-- 0为回复一级评论 -->
            <button @click="reply_submit(item, 0)">发表评论</button>
          </div>

          <!-- 次级评论 -->
          <div class="second">
            <ul class="ul">
              <li v-for="(sons, index) in item.children" :key="index">
                <div class="top">
                  <!-- 次级评论头像,该用户没有头像则显示默认头像 -->
                  <a href="JavaScript:;" class="second-img">
                    <img v-if="sons.profilePhoto" :src="sons.profilePhoto"/>
                    <img v-else src="https://randomuser.me/api/portraits/men/1.jpg"/>
                  </a>
                  <div class="second-content">
                    <!-- 次级评论用户昵称 -->
                    <h3 class="second-username">{{ sons.username }}</h3>
                    <!-- 次级评论评论时间 -->
                    <span class="second-time">{{
                        sons.commentCreateTime | formatDate(sons.commentCreateTime)
                      }}</span>
                    <!-- 次级评论内容 xxx回复xxx：评论内容-->
                    <p class="second-comment">
                      <span class="second-reply">
                        <span class="to_reply">{{ sons.username }}</span>
                        回复
                        <span class="to_reply">@{{ item.username }}</span
                        >：
                      </span>
                      {{ sons.commentDetail }}
                    </p>
                    <!-- 次级评论评论点赞 -->
                    <div class="first-right">
                      <!-- 一级评论点赞数 -->
                      <span @click="giveLike(sons)">
                        <svg :stroke="sons.isLike === 1?'red':'currentColor'" fill="none" stroke-width="2"
                             viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"
                             class="h-4 w-4" height="1em" width="1em"
                             xmlns="http://www.w3.org/2000/svg"
                             :ref="'zan'+sons.id">
                          <path
                              d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3">
                        </path></svg>&nbsp;
                        <span v-if="sons.likeNumber">{{ sons.likeNumber ===0?'':sons.likeNumber }}</span></span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 暂无评论的空状态 -->
      <el-empty description="暂无评论" v-if="comments.length <1 "></el-empty>
    </div>
    <!--分页-->
    <el-button type="text" class="seeMore" v-if="comments.length >0" @click="watchMore">查看更多</el-button>
  </div>

</template>

<script>

import moment from "moment/moment";

export default {

  data() {
    return {
      testCode: 20001,
      comments: [
        {
          profilePhoto: 'https://randomuser.me/api/portraits/men/1.jpg',
          username: "John Doe",
          commentCode: 1,
          commentCreateTime: "2020-12-12 12:12:12",
          commentDetail: "这是一条评论。",
          likeNumber: 5,
          like: '',
          testCode: 20001,
          children: [{}],
          isLike: 'currentColor',
        }
      ],
      currentPage: 1,
      pageSize: 10,
      comment: '',
      parentId: -1,
      childComments: '',

    };
  },
  filters: {
    formatDate(date) {
      let moment = require('moment');
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  methods: {
    giveLike(item) {
      let params = {
        id: item.id,
        likeNumber: item.likeNumber,
        testCode: this.testCode,
        parentId:item.parentId,
      }
      this.$axios.postForm('/comment/updateLikeNumber', params).then(response => {
        let responseData = response.data;
        if (responseData.code == 200) {
          this.initComment();
        }
      })

    },


    initComment() {
      let config = {
        params: {
          testCode: this.testCode,
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }
      this.$axios.get('/comment/getCommentByTestCode', config).then(res => {
        if (res.data.code === 200) {
          this.comments = res.data.data.pageVo;
          this.currentPage = res.data.data.currentPage;
          this.size = res.data.data.size;
          this.total = res.data.data.total;
        }
      })
    },

    submitComment() {
      let params = {
        comment: this.comment,
        testCode: this.testCode,
        parentId: this.parentId
      }
      this.addComment(params);

    },

    reply_submit(comment) {
      let params = {
        comment: this.childComments,
        testCode: this.testCode,
        parentId: comment.id
      }
      this.addComment(params);

    },

    addComment(params) {
      if (params.comment==""){
        this.$message({
          message:"请输入评论内容",
          type:"error",
          duration:2000
        })
        this.initComment();
        return;
      }
      this.$axios.postForm("/comment/addComment", params).then(response => {
        let responseData = response.data;
        if (responseData.code === 200) {
          this.$message({
            message: "评论成功",
            type: "success",
            duration: 2000
          })
          this.initComment();
          this.comment = '';
          this.childComments = ''
        } else {
          this.$message({
            message: '评论失败',
            type: "success",
            duration: 2000
          })
        }
      })
    },

    watchMore() {
      this.pageSize = this.pageSize + 10;
      this.initComment();
    },

    comment_input(comment) {
      this.comment = '';
      this.childComments = ''
      let params = {
        id: comment.id,
        num: 1
      }
      this.$axios.postForm("/comment/update", params).then(response => {
        let responseData = response.data;
        if (responseData.code === 200) {
          this.initComment();
        }
      })
    },
  },
  activated() {
    this.testCode = sessionStorage.getItem("testId");
    this.pageSize = 5;
    this.initComment();
  }
};
</script>

<style>
.ul{
  list-style:none;
}
.seeMore {
  position: absolute;
  left: 48%;
}

.div {
  position: relative;
  border: 1px solid #e2e7bf;
  width: 865px;
  top: -120px;
}

/* 评论框 */
.head {
  background-color: rgb(248, 248, 248);
  position: relative;
  height: 75px;
  border-radius: 5px;
}

/* 评论框 */
.head input {
  position: absolute;
  top: 13px;
  left: 80px;
  height: 45px;
  border-radius: 5px;
  outline: none;
  width: 65%;
  font-size: 20px;
  padding: 0 20px;
  border: 2px solid #f8f8f8;
}

/* 发布评论按钮 */
.head button {
  position: absolute;
  top: 13px;
  right: 20px;
  width: 120px;
  height: 48px;
  border: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
}

/* 鼠标经过字体加粗 */
.head button:hover {
  font-weight: 600;
}

/* 评论内容区域 */
.content .first {
  display: flex;
  position: relative;
  padding: 10px 10px 0px 0;
}

.first .first-img {
  flex: 1;
  text-align: center;
}

.first img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.first-username,
.second-username {
  color: #504f4f;
}

.first-content {
  flex: 9;
}

.first-time,
.second-time {
  color: #767575;
}

.first-comment,
.second-comment {
  margin-top: 5px;
}

/* 右边点赞和评论 */
.first-right,
.second-right {
  position: absolute;
  right: 1%;
  top: 10px;
}

.first-right span,
.second-right span {
  margin-right: 20px;
  cursor: pointer;
}

.second {
  background-color: #f3f3f3;
  margin-top: 10px;
}

.second li {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid rgb(237, 237, 237);
}

.second .top {
  display: flex;
  position: relative;
}

.second-img {
  flex: 1;
  text-align: center;
}

.to_reply {
  color: rgb(106, 106, 106);
}

.second-content {
  flex: 9;
}

.second .reply_li {
  margin-left: 70px;
}

/* 评论框 */
.reply-comment {
  margin: 10px 0 0 0;
}

.reply-comment input {
  height: 40px;
  border-radius: 5px;
  outline: none;
  width: 70%;
  font-size: 18px;
  padding: 0 20px;
  /* border: 2px solid #f8f8f8; */
  border: 2px solid skyblue;
}

/* 发布评论按钮 */
.reply-comment button {
  width: 15%;
  height: 43px;
  border: 0;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
  margin-left: 20px;
}

/* 鼠标经过字体加粗 */
.reply-comment button:hover {
  font-weight: 600;
}


</style>
